<template>
  <view class="shareP">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="我的员工"
      back-text=""
    >
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view
          @click="yuanRuleM"
          style="padding: 0rem 0.5rem; display: flex; align-items: center"
        >
          <view
            style="
              font-size: 0.75rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #02af74;
            "
            >员工规则</view
          >
          <!-- <image style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <view class="contentsP">
      <view v-if="showDatas.length == 0">
        <view style="padding: 5rem 0rem; text-align: center">
          <image
            style="width: 10rem; height: 10rem"
            src="../../../style/image/my/A28.png"
            alt=""
          />
          <view style="color: #999999; font-size: 0.65rem; padding: 2rem">
            当前暂无
          </view>
        </view>
      </view>
      <view
        @click="goDetailedM"
        class="items"
        v-else
        v-for="(item, index) in showDatas"
        :key="index"
      >
        <view class="person">
          <u-avatar :src="item.headImg" mode="circle"></u-avatar>
          <view class="text">
            <view>{{
              item.nickName == null ? "暂未设置" : item.nickName
            }}</view>
            <view>{{ item.phone }}</view>
          </view>
        </view>

        <view class="content-bottom-right">
          <view
            @click="editM(item)"
            style="display: flex; align-items: center; margin-right: 1rem"
          >
            <image
              style="width: 0.8rem; height: 0.8rem; margin-right: 0.2rem"
              src="../../../style/image/order/edit.png"
              alt=""
            />
            <view class="bottom-text">编辑</view>
          </view>
          <view
            @click="deleteEmployee(item)"
            style="display: flex; align-items: center"
          >
            <image
              style="width: 0.8rem; height: 0.8rem; margin-right: 0.2rem"
              src="../../../style/image/order/delete.png"
              alt=""
            />
            <view class="bottom-text">删除</view>
          </view>
        </view>
      </view>

      <view></view>
    </view>

    <u-modal
      v-model="modalShow"
      @confirm="confirm"
      :show-title="false"
      :show-cancel-button="true"
      :content="content"
    ></u-modal>

    <view @click="addM" class="footP">
      <view style="padding: 0.7rem; display: flex; align-items: center">
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view
          style="
            color: white;
            margin-left: 0.2rem;
            display: flex;
            align-items: center;
          "
        >
          <image
            style="width: 1rem; height: 1rem; margin-right: 0.2rem"
            src="../../../style/image/order/add.png"
            alt=""
          />
          <view>添加员工</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { AppModule } from "../../../store/modules/app";
import { myStaff, delStaff } from "../../../utils/uniApi";
@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public current = 0;

  public showDatas = [];
  public content = "确认删除员工";
  public modalShow = false;

  public src = "";

  public showShareModal = false;

  public staffId = "";
  created() {}

  mounted() {
    uni.showLoading({
      title: "加载中",
    });
    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };
    myStaff(params).then((res: any) => {
      console.log("员工信息", res);

      this.showDatas = res.data.data;
      uni.hideLoading();
    });
  }


  onPullDownRefresh() {
    console.log("refresh");

    setTimeout(function () {
      uni.redirectTo({
        url: "./myEmployee",
      });
      uni.stopPullDownRefresh();
    }, 1000);
  }

  tabsChange(index: any) {
    //    document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    // this.swiperCurrent = index;
  }

  editM(data: any) {
    console.log(data, "编辑员工");

    uni.navigateTo({
      url: `./employee`,
    });

    var from: any = {
      nickName: data.nickName,
      phone: data.phone,
      id: data.id,
      pwd: data.pwd,
      staffProfitType: JSON.parse(data.staffProfitType), //员工是否享受分润权限(0 有权限，1无权限)
      staffProfitValue: data.staffProfitValue, //员工分润比例(最大为1)
      staffDrawMoneyStatus: JSON.parse(data.staffDrawMoneyStatus), //员工提现权限（0 有权限，1 无权限）
    };

    AppModule.staffInfoAction(from);
  }

  deleteEmployee(data: any) {
    console.log("删除", data);

    this.modalShow = true;

    this.staffId = data.id;
  }

  confirm() {
    let parmas = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")), //登录人ID
      id: this.staffId, //		员工ID
    };
    console.log(parmas, "parmas");

    delStaff(parmas).then((res: any) => {
      console.log(res, "resresres");

      uni.showToast({
        title: res.data.message,
        icon: "none",
        duration: 2000,
      });

    });
  }

  addM() {
    uni.navigateTo({
      url: "./addEmployee",
    });
  }

  yuanRuleM() {
    uni.navigateTo({
      url: "./employeeDetailed",
    });
  }
  logoTimeM() {
    console.log("changan");
    this.showShareModal = true;
  }

  goDetailedM() {
    console.log("1232131231");
    uni.navigateTo({
      url: "./message",
    });
  }

  BackM() {
    uni.switchTab({
      url: "../../home/home",
    });
  }
}
</script>

<style  lang="scss"  scoped>
.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #f2f2f2;
}

.person {
  display: flex;
}

.content-bottom-right {
  display: flex;
}

.bottom-text {
  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

.text {
  display: flex;
  flex-wrap: revert;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 0.5rem;
}
</style>